<template>
  <el-dropdown>
    <span class="el-dropdown-link">
      <el-avatar :icon="UserFilled" />
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="peoInf">个人信息</el-dropdown-item>
        <el-dropdown-item @click="apOrder">预约订单</el-dropdown-item>
        <el-dropdown-item @click="signOut">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup>
import { UserFilled } from '@element-plus/icons-vue'
import {useRouter} from 'vue-router'
const router = useRouter();
function peoInf(){
  router.push({
    path: '/personalInfo'
  })
}
function apOrder(){
  router.push({
    path: '/appointmentOrder'
  })
}
function signOut(){
  router.push({
    path: '/'
  })
}
</script>

<style scoped>
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

:deep(.el-tooltip__trigger:focus-visible) {
  outline: unset;
}
</style>